<template>
  <q-splitter
      v-model="splitterModel"
      separator-class="bg-grey-7"
  >
    <template v-slot:before>
      <q-tabs
          v-model="tab"
          vertical
          active-color="primary"
          indicator-color="primary"
          class="text-grey-9"
      >
        <q-tab name="config" icon="developer_board" label="自动分单配置"/>
        <q-tab name="preview" icon="color_lens" label="自动分单预览"/>
      </q-tabs>
    </template>

    <template v-slot:after>
      <q-tab-panels
          v-model="tab"
          animated
          vertical
          transition-prev="jump-up"
          transition-next="jump-up"
          class="bg-transparent full-height"
      >
        <order-config name="config"/>
        <order-assign-preview name="preview"/>
      </q-tab-panels>
    </template>
  </q-splitter>
</template>

<script>
import { ref } from 'vue'

import OrderConfig from 'components/transport/automate/OrderConfig.vue'
import OrderAssignPreview from 'components/transport/automate/OrderAssignPreview.vue'

export default {
  name: 'OrderAutomate',
  components: {
    OrderAssignPreview,
    OrderConfig
  },
  setup () {
    return {
      splitterModel: ref(20),
      tab: ref('config')
    }
  }
}
</script>
